<template>
	<view class="uni_box home">
		<navbar title='达人商单'>
		</navbar>
		<view class="content">
			<view class="dcontent">
				
		
			<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" class="dcontents" textLoading="999">
				<view class="stone">
					<image class="faicon" src="/static/new/faicon.png" />
					<text class="tanname">探店商单详情</text>
					<view class="ritems ml">
						<image class="wait " v-if="isLoading" src="@/pages_subject/static/img/wait.gif" />
						<view class="jxing">进行中</view>
					</view>
				</view>
				<view class="liethree">
					<view class="lxuan" :class="nid==item.id?'lactiveone':nid>item.id?'lactive':''" v-for="(item,index) in btns" :key="index">
						{{item.name}}
					</view>
				</view>
				<view class="xian" style="margin: 20px 0 10px;"></view>

				<view class="men">
					<view class="menone">
						<text class="mentit">门店信息</text>
						<text class="mentime">营业时间：9:00-20:00</text>
						<text class="menduzhi ml">点击信息，一键复制</text>
					</view>
					<view class="mlist">
						<view class="mitem">
							<text class="itemname">探店地址</text>
							<text class="itemval txt">{{ info.address }}</text>
							<!-- <u-input v-model="name" type="text" :border="false" placeholder="请输入"/> -->
							<image class="dinicon ml" src="/static/new/dinicon.png" />
						</view>
						<view class="mitem">
							<text class="itemname">门店POI</text>
							<text class="itemval txt">{{ info.poi_address }}</text>
							<!-- <u-input v-model="name" type="text" :border="false" placeholder="请输入"/> -->
						</view>
					</view>
				</view>
				<view class="xian" style="margin: 20px 0 10px;"></view>
				<view class="men">
					<view class="menone">
						<text class="mentit">团购视频</text>
						<text class="menduzhi ml" v-if="info.contact">到店联系：可以 {{info.contact}}</text>
					</view>
					<view class="mlist">
						<view class="mitem">
							<text class="itemname">主推套餐</text>
							<text class="itemval txt">{{info.main_packages}}</text>
						</view>
						<view class="mitem">
							<!-- <text class="itemname">门店POI</text> -->
							<text class="itemval hui txt">镜头数＞ {{info.shot_num}} 个，时长 {{ info.video_uration }} 秒左右 {{info.highlights}}</text>
							<!-- <u-input v-model="name" type="text" :border="false" placeholder="请输入"/> -->
						</view>
						<view class="mitem">
							<text class="itemname">必带话题</text>
							<text class="itemval zise txt">{{info.subject}}</text>
						</view>
						<view class="daihuo">
							<view class="daiitem">
								<view class="daileft">
									CPS佣金
								</view>
								<view class="dairight">
									{{info.cps_commission}}%
								</view>
							</view>
							<view class="suitem" @click="copy(info.source)">
								<text class="suname">素材</text>
								<image class="lianjie" src="@/pages_subject/static/img/lianjie.png" />
							</view>
							<view class="suitem" v-if="info.is_meals == 1">
								<text class="suname">含餐</text>
							</view>
							<view class="suitem" v-if="info.is_stay == 1">
								<text class="suname">含住</text>
							</view>
						</view>
						<view class="nei">
							<text class="neitit">限流处罚账号不结算，有效粉不够的不结算，报名多号的需要口播一个账号限流处罚账号不结算，有效粉不够的不结算，报名多号的需要口播一个账号限流处罚账号不结算，有效粉不够的不结算</text>
						</view>
					</view>
				</view>
				<view class="xian" style="margin: 20px 0 10px;"></view>
				<view class="men">
					<view class="menone">
						<text class="mentit">探店账号</text>
					</view>
					<view class="mlist">
						<view class="tandian">
							<view class="tanbiao">车马</view>
							<view class="tanview" v-for="(item,index) in 5" :key="index">
								<view class="tanone">
									Lv3
								</view>
								<view class="tantwo">
									50元
								</view>
							</view>
						</view>
						<view class="mitem">
							<text class="itemval hui txt">内容力≥Lv2，粉丝＞3000，账号归属地：广州市</text>
						</view>
						<view class="mitem">
							<text class="itemname xiao">探店日期范围</text>
							<text class="itemval hui">2024-05-30 至 2024-05-31</text>
						</view>
						<view class="mitem">
							<text class="itemname xiao">最晚交片日期</text>
							<text class="itemval hui">2024-05-30</text>
						</view>
					</view>
				</view>
				<view class="xian" style="margin: 20px 0 10px;"></view>
				<view class="men">
					<view class="menone">
						<text class="mentit">商单进展</text>
					</view>
					<view class="mlist">
						<view class="jinzhan">
							<view class="jins">
								<text class="banme">报名中  |  </text>
								<text class="ml banme">{{info.registered}} 人</text>
							</view>
							<view class="jinitem">
								<text class="ren ml">{{info.people_num}}人</text>
							</view>
						</view>
					</view>
				</view>
				<view class="xian" style="margin: 20px 0 10px;"></view>
				<view class="men">
					<view class="menone">
						<text class="mentit">参与中的达人</text>
					</view>
					<view class="mlist">
						<view class="weibao">
							<text>你还没有报名，至少损失810元</text>
						</view>
					</view>
				</view>
				<view class="xian" style="margin: 20px 0 10px;"></view>
				<view class="men">
					<view class="menone">
						<text class="mentit">参与中的达人</text>
					</view>
					<view class="mlist">
						<view class="xinitem" v-for="(item,index) in application">
							<image class="tou2" :src="item.avatar?item.avatar:'/static/tou2.png'" mode="" />
							<view class="xinnav">
								<view class="xinone">
									<text class="xinname txt">{{item.douyin}}</text>
									<!-- <text class="xinhao">douyinhao</text> -->
								</view>
								<view class="xinbiaoqian">
									<view class="xbiao xactive">
										<image class="yunjian" src="/static/new/shangbai.png" mode="" />
										<text class="bname">Lv4</text>
									</view>
									<view class="xbiao">
										<image class="yunjian" src="/static/new/htwo.png" mode="" />
										<text class="bname">Lv2</text>
									</view>
									<view class="xbiao">
										<image class="yunjian" src="/static/new/xin.png" mode="" />
										<text class="bname">3000</text>
									</view>
								</view>
								
							</view>
							<view class="bj">查看达人</view>
						</view>
						<view class="xinitem" v-if="jinstatus == 1">
							<image class="tou2" src="/static/tou2.png" mode="" />
							<view class="xinnav">
								<view class="xinone">
									<text class="xinname txt">昵称昵称昵十个字卡断</text>
									<text class="xinhao">douyinhao</text>
								</view>
								<view class="xinbiaoqian">
									<view class="xbiao xactive">
										<image class="yunjian" src="/static/new/shangbai.png" mode="" />
										<text class="bname">Lv4</text>
									</view>
									<view class="xbiao">
										<image class="yunjian" src="/static/new/htwo.png" mode="" />
										<text class="bname">Lv2</text>
									</view>
									<view class="xbiao">
										<image class="yunjian" src="/static/new/xin.png" mode="" />
										<text class="bname">3000</text>
									</view>
								</view>
								
							</view>
							<view class="bj daifabu">待发布</view>
						</view>
						<view class="jinqian">
							仅展示前10名参与达人
						</view>
					</view>
				</view>
				<view class="xian" style="margin: 20px 0 10px;"></view>
				<view class="men">
					<view class="menone">
						<text class="mentit">商单对接群</text>
					</view>
					<view class="mazhan">
						<view class="zhanone">
							<image class="zhanbg" src="/static/guxing.png" mode="" />
							<view class="zhanview">
								<image class="zhanlogo" src="@/pages_subject/static/img/logo.png" mode="" />
								<text class="zhanname">达人商单</text>
								<text class="taunname">抖音团购接单</text>
								<text class="fangname">方便省心好用</text>
							</view>
						</view>
					</view>
				</view>


			</mescroll-body>
		</view>
			

			<!-- 底部按钮 -->
			 <view class="dbtn">
				<view class="btnone">
					<view class="btnfen" v-if="jinstatus == 0">
						<image class="btwo" src="@/pages_subject/static/img/shangbai.png" mode="" />
						<text class="tanname">探店报名</text>
					</view>
					<view class="btnfen" v-if="jinstatus == 1" @click="tspopshow=true">
						<image class="btwo" src="@/pages_subject/static/img/jinxing.png" mode="" />
						<text class="tanname">上传正片</text>
					</view>
					<view class="btnfen" v-if="jinstatus == 2" @click="htpopshow=true">
						<image class="btwo" src="@/pages_subject/static/img/jinxing.png" mode="" />
						<text class="tanname">发布链接回填</text>
					</view>
					<view class="btnfen btnfenno" v-if="jinstatus == 3">
						<text class="tanname">已超最晚交片时限</text>
					</view>
					
					<!-- <view class="btnfen jieshu">
						<image class="btwo" src="@/pages_subject/static/img/shanghui.png" mode="" />
						<text class="tanname">报名结束</text>
					</view> -->
					<view class="btnfenfen ml">
						<image class="btwo" src="@/pages_subject/static/img/zhuan.png" mode="" />
						<text class="tanname">探店报名</text>
					</view>
				</view>
				<text class="baoxie" v-if="jinstatus == 0">报名即同意《达人商单用户协议》</text>
				<text class="baoxie" v-if="jinstatus == 1||jinstatus == 2">达人商单，团购达人接单平台</text>
				<text class="baoxie" v-if="jinstatus <= 3">点击提交<text class="youname">优化建议</text>或<text class="youname">投诉举报</text></text>
			 </view>
			 <!-- 底部按钮结束 -->
		</view>

		<!-- 选择达人账号 -->
		 <view class="pop">
			<u-popup v-model="xpopshow" mode="bottom">
				<view class="xpopview">
					<view class="xpopone">
						<text class="xuanname">选择达人账号</text>
						<scroll-view class="popdalist" scroll-y>
							<view class="xinitem" v-for="(item,index) in 10" :key="index">
								<image class="tou2" src="/static/tou2.png" mode="" />
								<view class="xinnav">
									<view class="xinone">
										<text class="xinname txt">昵称昵称昵十个字卡断</text>
										<text class="xinhao">douyinhao</text>
									</view>
									<view class="xinbiaoqian">
										<view class="xbiao xactive">
											<image class="yunjian" src="/static/new/shangbai.png" mode="" />
											<text class="bname">Lv4</text>
										</view>
										<view class="xbiao">
											<image class="yunjian" src="/static/new/htwo.png" mode="" />
											<text class="bname">Lv2</text>
										</view>
										<view class="xbiao">
											<image class="yunjian" src="/static/new/xin.png" mode="" />
											<text class="bname">3000</text>
										</view>
									</view>
									
								</view>
								<view class="tanview">
									<view class="tanone">
										Lv3
									</view>
									<view class="tantwo">
										50元
									</view>
								</view>
								<!-- <view class="bj">未达标</view> -->
							</view>
						</scroll-view>
						<view class="popxian"></view>
						<view class="tianview">
							<view class="tianitem">添加账号</view>
							<view class="tianitem">补充收款方式</view>
						</view>
					</view>
					<view class="timefan">
						<text class="tanfantit">探店日期范围：2024-05-30 至 2024-05-31</text>
						<view class="rixuan">
							<view class="itemxuan xuanone">
								提报探店日期
							</view>
							<view class="itemxuan xuanone">
								选择日期
							</view>
							<view class="itemxuan xuantit">
								开启提醒
							</view>
						</view>
						<view class="libao" @click="sbpopshow=true">立即报名</view>
						<text class="baoxie">报名即同意《达人商单用户协议》</text>
					</view>
				</view>
			</u-popup>

			<!-- 报名失败和其他弹窗 -->
			<u-popup v-model="sbpopshow" width="85%" mode="center">
				<view class="sbpopview">
					<view class="abpopone flex-center" v-if="baostatus == 1">
						<text class="bname">报名失败</text>
						<view class="miaoview">
							<text class="mname">商单报名达人已满 50/50</text>
							<text class="mname">别灰心，反选时部分名额会被释放</text>
						</view>
						<view class="mbtn mactive">开启后补报名提醒</view>
						<view class="mbtn" style="font-size: 14px;">放弃本商单，预计损失￥810元</view>
					</view>
					<view class="abpopone flex-center" v-if="baostatus == 2">
						<text class="bname">重新报名</text>
						<view class="miaoview">
							<text class="mname">本商单仅剩2个名额，报名账号超限</text>
							<text class="mname" style="color: rgba(51, 51, 51, 1);">请选择2个账号重新报名</text>
						</view>
						<view class="mbtn mactive">重新报名</view>
					</view>
					<view class="abpopone flex-center" v-if="baostatus == 3||baostatus == 4">
						<text class="bname" style="color: rgba(119, 102, 231, 1);">报名成功</text>
						<view class="miaoview">
							<text class="mname">3个账号均已报名成功，静等反选吧</text>
							<text class="mname" style="color: rgba(51, 51, 51, 1);">建议开启商单提醒，快速知道反选结果</text>
						</view>
						<view class="mbtn mactive" v-if="baostatus == 3">开启商单提醒</view>
						<view class="mbtn mactive" v-if="baostatus == 4">好的</view>
					</view>
					<image class="chabai" @click="sbpopshow=false" src="@/pages_subject/static/img/chabai.png" mode="" />

				</view>
			</u-popup>



			<!-- 正片提审样式 -->
			<u-popup v-model="tspopshow" mode="bottom">
				<view class="xpopview">
					<view class="xpopone" style="padding: 40px 20px 10px;">
						<text class="xuanname">选择达人账号</text>
						<scroll-view class="popdalist" style="max-height: 500rpx;" scroll-y>
							<view class="xinitem" v-for="(item,index) in 10" :key="index">
								<image class="tou2" src="/static/tou2.png" mode="" />
								<view class="xinnav">
									<view class="xinone">
										<text class="xinname txt">昵称昵称昵十个字卡断</text>
										<text class="xinhao">douyinhao</text>
									</view>
									<view class="xinbiaoqian">
										<view class="xbiao xactive">
											<image class="yunjian" src="/static/new/shangbai.png" mode="" />
											<text class="bname">Lv4</text>
										</view>
										<view class="xbiao">
											<image class="yunjian" src="/static/new/htwo.png" mode="" />
											<text class="bname">Lv2</text>
										</view>
										<view class="xbiao">
											<image class="yunjian" src="/static/new/xin.png" mode="" />
											<text class="bname">3000</text>
										</view>
									</view>
									
								</view>
								<view class="jiaopian">
									<text>待交片</text>
									<!-- <image class="dui" src="@/pages_subject/static/img/dui.png" mode="" /> -->
								</view>
								<!-- <view class="bj">未达标</view> -->
							</view>
						</scroll-view>
					</view>
					<view class="timefan">
						<text class="tanfantit">点选账号，上传对应正片提审</text>
						
						<view class="libao" style="margin-top: 20px;" @click="getjianyi">正片提审</view>
					</view>
				</view>
			</u-popup>

			<!-- 发布链接回填样式 -->
			<u-popup v-model="htpopshow" mode="bottom">
				<view class="xpopview">
					<view class="xpopone" style="padding: 40px 20px 10px;">
						<text class="xuanname">发布链接回填</text>
						<scroll-view class="popdalist" style="max-height: 500rpx;" scroll-y>
							<view class="xinitem" v-for="(item,index) in 10" :key="index">
								<image class="tou2" src="/static/tou2.png" mode="" />
								<view class="xinnav">
									<view class="xinone">
										<text class="xinname txt">昵称昵称昵十个字卡断</text>
										<text class="xinhao">douyinhao</text>
									</view>
									<view class="xinbiaoqian">
										<view class="xbiao xactive">
											<image class="yunjian" src="/static/new/shangbai.png" mode="" />
											<text class="bname">Lv4</text>
										</view>
										<view class="xbiao">
											<image class="yunjian" src="/static/new/htwo.png" mode="" />
											<text class="bname">Lv2</text>
										</view>
										<view class="xbiao">
											<image class="yunjian" src="/static/new/xin.png" mode="" />
											<text class="bname">3000</text>
										</view>
									</view>
									
								</view>
								<view class="jiaopian">
									<text>粘贴链接</text>
									<!-- <image class="dui" src="@/pages_subject/static/img/dui.png" mode="" /> -->
								</view>
								<!-- <view class="bj">未达标</view> -->
							</view>
						</scroll-view>
					</view>
					<view class="timefan">
						<text class="tanfantit">点击账号，一键粘贴发布链接</text>
						<view class="libaotwo">
							<view class="huiquxiao" @click="htpopshow=false">取消</view>
							<view class="huiwancheng">完成回填</view>
						</view>
						<text class="baoxie">回填发布链接，才会进入结款环节哟</text>
					</view>
				</view>
			</u-popup>
		 </view>
	</view>
</template>

<script>
import MescrollBody from "@/components/mescroll-uni/components/mescroll-body/mescroll-body.vue";
	export default {
		components: {
			'MescrollBody': MescrollBody,
		},
		data() {
			return {
				isLoading:false,//是否加载
				mescroll: null,
				downOption:{
					textInOffset: '', // 下拉的距离在offset范围内的提示文本
					textOutOffset: '', // 下拉的距离大于offset范围的提示文本
					textLoading: '', // 加载中的提示文本
					textSuccess:'',//加载成功
					native:false,
					auto:false
				},
				btns:[
					{id:1,name:'报名',istrue:false},
					{id:2,name:'反选',istrue:false},
					{id:3,name:'实拍',istrue:false},
					{id:4,name:'短片',istrue:false},
					{id:5,name:'正片',istrue:false},
					{id:6,name:'审片',istrue:false},
					{id:7,name:'发布',istrue:false},
					{id:8,name:'结款',istrue:false},
				],
				nid:4,
				name:'',
				xpopshow:false,//选择达人账号
				sbpopshow:false,
				tspopshow:false,//正片提审样式
				htpopshow:false,//链接回填眼样式
				baostatus:1,//1报名失败 2重新报名 3报名成功开启商单 4报名成功直接好的
				jinstatus:3,//0探店报名 1商单进展样式 2发布回填 3已超最晚交片期限
				id:'',
				application:[],//已报名达人
				info:{},//信息
			}
		},
		onLoad(option) {
			if(option.id){
				this.id = option.id
			}
			this.getDetail()
		},
		onShow() {
		},
		onPullDownRefresh(e) {
			console.log(e)
			// uni.stopPullDownRefresh()
			// console.log(e)
			// // 当页面滚动时，检查是否需要显示加载效果
			// if (e.scrollTop + e.windowHeight >= e.scrollHeight - 100) {
			// this.isLoading = true;
			// // 在这里执行数据加载操作
			// // 数据加载完成后，可以隐藏加载效果
			// this.isLoading = false;
			// }
		},

		methods: {
			async getDetail(){
				
				let res = await this.$u.api.projectInfo({
					project_id:this.id
				});
				this.info = res.info
				this.application = res.application

				let btns = this.btns
				for(let i in btns){
					if(btns[i].id <= Number(this.info.status)){
						btns[i].istrue = true
					}
				}
				this.nid = this.info.status||1
				this.btns = btns
			},
			mescrollInit(mescroll) {
				// console.log(mescroll)
				this.mescroll = mescroll;
				this.$nextTick(()=>{
					this.mescroll.optDown.auto = false;
					this.mescroll.optUp.isLock = true 
					this.mescroll.optUp.use = false;
				})
			},
			downCallback(){
				
				// this.mescroll.endSuccess();
				this.isLoading = true;
				// this.$nextTick(()=>{
				// 	this.pageIsReload = true;
				// });
				uni.vibrateShort({
					success: function () {
						console.log('success');
					}
				});
				setTimeout(() => {
					this.isLoading = false;
					this.mescroll.resetUpScroll();
					this.mescroll.endSuccess();
					this.$u.toast("加载成功");
				}, 1000);
			},
			upCallback(){
				this.mescroll.endSuccess();
			},
			getjianyi(){
				this.navrouter("/pages_subject/twoPage/Jianyi");
			},
			scrolltoupper(e){
				console.log(e)
			},
			refresherpulling(e){
				console.log(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f8f8fd;
	}
	.content{
		background-color: #f8f8fd;
		padding-bottom: 210rpx;
		.dcontent{
			padding: 20px;
			.dcontents{
				width: 100%;
			}
			.stone{
				display: flex;
				flex-direction: row;
				align-items: center;
				.faicon{
					width: 35px;
					height: 35px;
					margin-right: 10px;
				}
				.tanname{
					font-size: 24px;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
				}
				.ritems{
					display: flex;
					flex-direction: row;
					align-items: center;
				}
				.wait{
					width: 27px;
					margin-right: 10px;
					height: 27px;
				}
				.jxing{
					padding: 7px 10px;
					border-radius: 6px;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 6px 10px  rgba(119, 102, 231, 0.08);
					font-size: 14px;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
				}
			}
			
		}

		.liethree{
			margin-top: 20px;
			width: 100%;
			border-radius:0 3px 12px 12px;
			height: 36px;
			position: relative;
			display: flex;
			flex-direction: row;
			
			border: 1px solid rgba(220, 214, 255, 1);
			.lxuan{
				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 12px;
				font-weight: 400;
				color: rgba(102, 102, 102, 1);
				// border-radius: 12px;
			}
			.lxuan:first-child{
				border-radius: 0 0 0 12px;
			}
			.lactive{
				background: rgba(119, 102, 231, 1);
				color: rgba(220, 214, 255, 1);
			}
			.lactiveone{
				background: rgba(119, 102, 231, 1);
				color: #fff;
				font-weight: bold;
				border-radius: 0px 50px 50px 0px !important;
			}
			
		}


		.men{
			display: flex;
			flex-direction: column;
			.menone{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 10px;
				.mentit{
					font-size: 14px;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
				}
				.mentime{
					display: inline-block;
					margin-left: 12px;
					font-size: 12px;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
				}
				.menduzhi{
					font-size: 12px;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
				}
			}
			.mlist{
				.mitem{
					margin-bottom: 10px;
					border-radius: 9px;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 6px 10px  rgba(119, 102, 231, 0.08);
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 2px 10px;
					min-height: 40px;

					.itemname{
						width: 70px;
						border-right: 1px solid rgba(232, 232, 252, 1);
						text-align: center;
						display: inline-block;
						font-size: 12px;
						font-weight: 400;
						color: rgba(102, 102, 102, 1);
						margin-right: 10px;
					}
					.iteminput{
						margin-right: 10px;
					}
					.itemval{
						font-size: 14px;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						// max-width: 65%;
						flex: 1;
						display: inline-block;
					}
					.xiao{
						font-size: 11px;
					}
					.dinicon{
						width: 18px;
						height: 18px;
					}
					.zise{
						color: rgba(119, 102, 231, 1);
					}
					.hui{
						color: rgba(102, 102, 102, 1);
					}
				}
				.daihuo{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin-bottom: 10px;
					.daiitem{
						display: flex;
						flex-direction: row;
						height: 40px;
						position: relative;
						.daileft{
							padding: 0 10px;
							height: 100%;
							border-radius: 9px 0px 0px 9px;
							background: rgba(119, 102, 231, 1);
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 14px;
							font-weight: 400;
							color: rgba(255, 255, 255, 1);
						}
						.dairight{
							padding: 0 10px;
							height: 100%;
							border-radius: 0px 9px 9px 0px;
							background-color: #fff;
							font-size: 14px;
							font-weight: 400;
							display: flex;
							align-items: center;
							justify-content: center;
							color: rgba(102, 102, 102, 1);
						}
					}
					.suitem{
						height: 40px;
						opacity: 1;
						border-radius: 9px;
						background: rgba(255, 255, 255, 1);
						box-shadow: 0px 6px 10px  rgba(119, 102, 231, 0.08);
						padding: 0 10px;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						.suname{
							font-size: 14px;
							font-weight: 400;
							color: rgba(102, 102, 102, 1);
						}
						.lianjie{
							margin-left: 10px;
							width: 21px;
							height: 21px;
						}
					}
				}
				.nei{
					margin-bottom: 10px;
					border-radius: 9px;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 6px 10px  rgba(119, 102, 231, 0.08);
					padding: 10px;
					.neitit{
						font-size: 14px;
						font-weight: 400;
						letter-spacing: 0px;
						line-height: 27px;
						color: rgba(51, 51, 51, 1);
					}
				}

				.tandian{
					display: flex;
					flex-direction: row;
					margin-bottom: 10px;
					justify-content: space-between;
					.tanbiao{
						width: 25px;
						height: 40px;
						opacity: 1;
						border-radius: 12px 0px 0px 3px;
						background: rgba(119, 102, 231, 1);
						font-size: 12px;
						font-weight: 400;
						letter-spacing: 0px;
						line-height: 12px;
						color: rgba(255, 255, 255, 1);
						text-align: left;
						vertical-align: top;
						display: flex;
						align-items: center;
						justify-content: center;
						writing-mode: vertical-rl;
					}
					.tanview{
						display: flex;
						flex-direction: column;
						.tanone{
							width: 52px;
							height: 20px;
							opacity: 1;
							border-radius: 3px 3px 0px 0px;
							background: rgba(119, 102, 231, 1);
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 12px;
							font-weight: 400;
							color: rgba(255, 255, 255, 1);
						}
						.tantwo{
							width: 52px;
							height: 20px;
							opacity: 1;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 0px 0px, 3px, 3px;
							background: rgba(255, 255, 255, 1);
							box-shadow: 0px 6px 10px  rgba(119, 102, 231, 0.08);
							font-size: 12px;
							font-weight: 400;
							letter-spacing: 0px;
							line-height: 17.38px;
							color: rgba(102, 102, 102, 1);
						}
					}
				}

				.jinzhan{
					border-radius: 50px;
					border: 1px solid rgba(220, 214, 255, 1);
					height: 36px;
					border-radius: 50px;
					position: relative;
					.jins{
						border-radius: 50px;
						position: absolute;
						width: 40%;
						height: 100%;
						left: 0;
						top: 0;
						background: rgba(119, 102, 231, 1);
						display: flex;
						align-items: center;
						flex-direction: row;
						padding: 0 20px;
					}
					.jinitem{
						position: absolute;
						z-index: 2;
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: row;
						align-items: center;
						padding: 0 20px;
						
					}
					.banme{
						font-size: 12px;
						font-weight: 700;
						letter-spacing: 0px;
						line-height: 17.38px;
						color: rgba(255, 255, 255, 1);
					}
					.ren{
						font-size: 12px;
						font-weight: 400;
						letter-spacing: 0px;
						line-height: 17.38px;
						color: rgba(51, 51, 51, 1);
					}
				}

				.weibao{
					width: 100%;
					height: 35px;
					opacity: 1;
					border-radius: 6px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 14px;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 20.27px;
					color: rgba(119, 102, 231, 1);
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 6px 10px  rgba(119, 102, 231, 0.08);
				}


				.xinitem{
						padding: 10px 0;
						// margin-bottom: 10px;
						border-radius: 9px;
						border-bottom: 1px dashed rgba(232, 232, 232, 1);
						// border-bottom: 1px dashed rgba(232, 232, 232, 1);
						// background: rgba(255, 255, 255, 1);
						// box-shadow: 0px 6px 10px  rgba(119, 102, 231, 0.08);
						display: flex;
						flex-direction: row;
						align-items: center;
						.tou2{
							width: 36px;
							height: 36px;
							border-radius: 50%;
							margin-right: 15px;
						}
						.xinnav{
							display: flex;
							flex-direction: column;
							width: 60%;
							.xinone{
								display: flex;
								flex-direction: row;
								align-items: center;
								.xinname{
									max-width: 80%;
									display: inline-block;
									font-size: 12px;
									font-weight: 400;
									color: rgba(102, 102, 102, 1);
								}
								.xinhao{
									font-size: 12px;
									font-weight: 400;
									display: inline-block;
									margin-left: 10px;
									color: rgba(102, 102, 102, 1);
								}
							}
							.xinbiaoqian{
								display: flex;
								flex-direction: row;
								margin-top: 5px;
								.xbiao{
									display: flex;
									flex-direction: row;
									align-items: center;
									padding: 3px 5px;
									border-radius: 3px;
									margin-right: 15px;
									background: rgba(255, 255, 255, 1);

									border: 1px solid rgba(220, 214, 255, 1);
									.yunjian{
										width: 12px;
										height: 12px;
										margin-right: 3px;
									}
									.bname{
										font-size: 10px;
										font-weight: 400;
										color: rgba(102, 102, 102, 1);
									}
								}
								.xactive{
									background: rgba(119, 102, 231, 1);
									border: none;
									.bname{
										color: #fff;
									}
								}
							}
							
						}
						.bj{
							margin-left: auto;
							width: 80px;
							height: 36px;
							opacity: 1;
							border-radius: 9px;
							background: rgba(255, 255, 255, 1);

							border: 1px solid rgba(238, 238, 238, 1);
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 14px;
							font-weight: 400;
							letter-spacing: 0px;
							line-height: 20.27px;
							color: rgba(102, 102, 102, 1);

						}
						.daifabu{
							border-radius: 9px;
							background: rgba(119, 102, 231, 1);
							border: none;
							color: rgba(255, 255, 255, 1);
						}

				}
				.jinqian{
					font-size: 12px;
					font-weight: 400;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 20rpx;
					color: rgba(153, 153, 153, 1);

				}

				
				
			}
		}
		.mazhan{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.zhanone{
				width: 120px;
				height: 120px;
				border-radius: 6px;
				position: relative;
				.zhanbg{
					position: absolute;
					width: 100%;
					height: 100%;

				}
				.zhanview{
					position: relative;
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.zhanlogo{
						width: 72rpx;
						height: 72rpx;
						border-radius: 50%;
						margin-bottom: 3px;
					}
					.zhanname{
						font-size: 12px;
						font-weight: 700;
						color: rgba(119, 102, 231, 1);
					}
					.taunname{
						display: block;
						margin-top: 20rpx;
						font-size: 10px;
						font-weight: 400;
						color: rgba(119, 102, 231, 1);
					}
					.fangname{
						font-size: 10px;
						font-weight: 500;
						color: rgba(119, 102, 231, 1);
					}
				}
			}
		}
	}
	.dbtn{
		position: fixed;
		width: 100%;
		height: 200rpx;
		opacity: 1;
		border-radius: 9px;
		background: rgba(248, 248, 253, 1);
		box-shadow: 0px -6px 10px  rgba(119, 102, 231, 0.08);
		bottom: 0;
		padding-bottom: 50rpx;
		padding: 20rpx 40rpx 50rpx;
		z-index: 100;
		.btnone{
			display: flex;
			flex-direction: row;
			align-items: center;
			.btnfen{
				width: 400rpx;
				height: 90rpx;
				opacity: 1;
				border-radius: 50px;
				background: linear-gradient(90deg, rgba(119, 102, 231, 1) 0%, rgba(121, 72, 234, 1) 100%);
				box-shadow: 0px 0px 3px  rgba(119, 102, 231, 0.63);
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;

				.btwo{
					width: 40rpx;
					margin-right: 4rpx;
					height: 40rpx;
				}
				.tanname{
					font-size: 16px;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
				}

			}
			.btnfenno{
				border-radius: 50px;
				background: rgba(255, 255, 255, 1);
				box-shadow: none;
				border: 1px solid rgba(238, 238, 238, 1);
				.tanname{
					font-size: 16px;
					font-weight: 500;
					color: rgba(153, 153, 153, 1);
				}
			}
			.btnfenfen{
				width:250rpx;
				height: 90rpx;
				opacity: 1;
				border-radius: 50px;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 0px 3px  rgba(119, 102, 231, 0.63);
				display: flex;
				align-items: center;
				justify-content: center;
				.btwo{
					width: 40rpx;
					margin-right: 4rpx;
					height: 40rpx;
				}
				.tanname{
					font-size: 16px;
					font-weight: 500;
					color: rgba(119, 102, 231, 1);
				}
			}
			.jieshu{
				background: rgba(255, 255, 255, 1);
				border: 1px solid rgba(238, 238, 238, 1);
				box-shadow: none;
				.tanname{
					color: rgba(153, 153, 153, 1);
				}
			}
		}
		
		.baoxie{
			font-size: 12px;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 17.38px;
			color: rgba(153, 153, 153, 1);
			display: block;
			margin-top: 20rpx;
			text-align: center;
			.youname{
				color: rgba(119, 102, 231, 1);
			}
		}

	}


	// 选择达人账号开始
	.pop /deep/ .u-drawer-bottom{
		background-color: transparent !important;
	}
	.pop /deep/.u-mode-center-box{
		background-color: transparent !important;
	}
	.xpopview{
		
		border-radius: 18px 18px 0px  0px;
		background: rgba(248, 248, 253, 1);
		box-shadow: 0px 0px 10px  rgba(119, 102, 231, 0.08);
		.xpopone{
			padding: 80rpx 40rpx 52rpx;
		}
		.xuanname{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;
			font-size: 48rpx;
			font-weight: 700;
			color: rgba(119, 102, 231, 1);
		}
		.popdalist{
			max-height: 300rpx;
			.xinitem{
				// padding: 10px 0;
				padding: 10px;
				margin-bottom: 10px;
				border-radius: 9px;
				background: rgba(255, 255, 255, 1);
				border: 1px solid rgba(238, 238, 238, 1);
				display: flex;
				flex-direction: row;
				align-items: center;
				.tou2{
					width: 36px;
					height: 36px;
					border-radius: 50%;
					margin-right: 15px;
				}
				.xinnav{
					display: flex;
					flex-direction: column;
					width: 60%;
					.xinone{
						display: flex;
						flex-direction: row;
						align-items: center;
						.xinname{
							max-width: 80%;
							display: inline-block;
							font-size: 12px;
							font-weight: 400;
							color: rgba(102, 102, 102, 1);
						}
						.xinhao{
							font-size: 12px;
							font-weight: 400;
							display: inline-block;
							margin-left: 10px;
							color: rgba(102, 102, 102, 1);
						}
					}
					.xinbiaoqian{
						display: flex;
						flex-direction: row;
						margin-top: 5px;
						.xbiao{
							display: flex;
							flex-direction: row;
							align-items: center;
							padding: 3px 5px;
							border-radius: 3px;
							margin-right: 15px;
							background: rgba(255, 255, 255, 1);

							border: 1px solid rgba(220, 214, 255, 1);
							.yunjian{
								width: 12px;
								height: 12px;
								margin-right: 3px;
							}
							.bname{
								font-size: 10px;
								font-weight: 400;
								color: rgba(102, 102, 102, 1);
							}
						}
						.xactive{
							background: rgba(119, 102, 231, 1);
							border: none;
							.bname{
								color: #fff;
							}
						}
					}
					
				}
				.bj{
					margin-left: auto;
					width: 52px;
					height: 36px;
					opacity: 1;
					border-radius: 3px;
					background: rgba(255, 255, 255, 1);

					border: 1px solid rgba(238, 238, 238, 1);
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 12px;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 20.27px;
					color: rgba(153, 153, 153, 1);

				}
				.tanview{
					display: flex;
					flex-direction: column;
					margin-left: auto;
					.tanone{
						width: 52px;
						height: 20px;
						opacity: 1;
						border-radius: 3px 3px, 0px, 0px;
						background: rgba(119, 102, 231, 1);
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 12px;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
					}
					.tantwo{
						width: 52px;
						height: 20px;
						opacity: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 0px 0px, 3px, 3px;
						background: rgba(255, 255, 255, 1);
						box-shadow: 0px 6px 10px  rgba(119, 102, 231, 0.08);
						font-size: 12px;
						font-weight: 400;
						letter-spacing: 0px;
						line-height: 17.38px;
						color: rgba(102, 102, 102, 1);
					}
				}
				.jiaopian{
					margin-left: auto;
					font-size: 12px;
					font-weight: 400;
					color: rgba(119, 102, 231, 1);
					.dui{
						width: 27px;
						height: 27px;
					}
				}

		}
		.xinitem:last-child{
			margin-bottom: 0;
		}
		}
		.popxian{
			border: 1px dashed rgba(119, 102, 231, 1);
			margin: 20rpx 0 40rpx;
		}
		.tianview{
			display: flex;
			align-items: center;
			justify-content: center;
			.tianitem{
				margin: 0 5px;
				width: 132px;
				height: 36px;
				opacity: 1;
				border-radius: 9px;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 6px 10px  rgba(119, 102, 231, 0.08);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				font-weight: 400;
				color: rgba(119, 102, 231, 1);
				
			}
		}
		.timefan{
			border-radius: 9px;
			background: rgba(248, 248, 253, 1);
			box-shadow: 0px -6px 10px  rgba(119, 102, 231, 0.08);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 10px 30px 25px;
			.tanfantit{
				font-size: 14px;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}
			.rixuan{
				border: 1px solid rgba(220, 214, 255, 1);
				width: 100%;
				height: 80rpx;
				border-radius: 100rpx;
				margin-top: 20rpx;
				display: flex;
				flex-direction: row;
				margin-bottom: 40rpx;
				.itemxuan{
					display: flex;
					align-items: center;
					justify-content: center;
					flex: 1;
					font-size: 14px;
					font-weight: 400;
					border-right: 1px solid rgba(220, 214, 255, 1);
					color: rgba(102, 102, 102, 1);
				}
				.xuanone{
					
				}
				.xuantit{
					color: rgba(119, 102, 231, 1);
				}
				.itemxuan:last-child{
					border-right: none;
				}
			}
			.libao{
				height: 50px;
				opacity: 1;
				border-radius: 50px;
				background: rgba(119, 102, 231, 1);
				box-shadow: 0px 0px 3px  rgba(119, 102, 231, 0.63);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				font-weight: 700;
				width: 100%;
				color: rgba(255, 255, 255, 1);
			}
			.libaotwo{
				margin-top: 10px;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				.huiquxiao{
					width: 100px;
					height: 50px;
					opacity: 1;
					border-radius: 50px 0px 0px 50px;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 0px 3px  rgba(119, 102, 231, 0.63);
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 16px;
					font-weight: 700;
					color: rgba(119, 102, 231, 1);
				}
				.huiwancheng{
					width: 215px;
					height: 50px;
					opacity: 1;
					border-radius: 0px 50px 50px 0px;
					background: linear-gradient(90deg, rgba(119, 102, 231, 1) 0%, rgba(121, 72, 234, 1) 100%);
					box-shadow: 0px 0px 3px  rgba(119, 102, 231, 0.63);
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 16px;
					font-weight: 700;
					color: rgba(255, 255, 255, 1);
				}
			}
			.baoxie{
				font-size: 12px;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				display: block;
				text-align: center;
				margin-top: 14rpx;
			}

		}



		
	}
	//选择达人账号结束
	// 报名失败弹窗
	.sbpopview{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		.chabai{
			width: 40px;
			height: 40px;
			margin-top: 40rpx;
		}
		.abpopone{
			border-radius: 18px;
			background: rgba(248, 248, 253, 1);
			box-shadow: 0px 0px 10px  rgba(119, 102, 231, 0.08);
			padding: 40px 30px;
			width: 100%;
			.bname{
				font-size: 24px;
				font-weight: 700;
				color: rgba(51, 51, 51, 1);
			}
			.miaoview{
				display: block;
				margin-top: 20px;
				margin-bottom:20px;
				.mname{
					font-size: 14px;
					font-weight: 400;
					text-align: center;
					display: block;
					margin-bottom: 2px;
					color: rgba(102, 102, 102, 1);
				}

			}
			.mbtn{
				margin-bottom: 10px;
				width: 100%;
				height: 50px;
				opacity: 1;
				border-radius: 50px;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 0px 3px  rgba(119, 102, 231, 0.63);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 16px;
				font-weight: 400;
				color: rgba(119, 102, 231, 1);
			}
			.mactive{
				background: rgba(119, 102, 231, 1);
				box-shadow: 0px 0px 3px  rgba(119, 102, 231, 0.63);
				color: #fff;
				font-weight: 700;
			}
			.mbtn:last-child{
				margin-bottom: 0;
			}

		}
		.flex-center{
			display: flex;
			flex-direction: column;
			align-items: center;

		}
	}
	// 报名失败弹窗结束
	/deep/.mescroll-downwarp .downwarp-content{
		display: none;
	}
</style>
